<template>
  <div v-if="crtShowVideoList?.length > 0" class="combination_overview">
    <div
      v-for="item in crtShowVideoList"
      :class="item.id === crtShowVideo.id ? 'active' : ''"
      @click="() => handleChangeVideo(item)"
    >
      <img v-if="edit_model != 5" :src="item?.thumbnail_url || item?.thumbnail" />
	  <imageTextCover v-if="edit_model == 5" :coverItem="item?.data[0]" />
    </div>
  </div>

  <div v-else class="combination_overview_none">请先生成预览~</div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, computed } from "vue";
import imageTextCover from './imageTextCover.vue';
import store from "../../../../../../store";
export default defineComponent({
  components: {
	  imageTextCover
  },
  setup(props, context) {
    const state = reactive({});
    const crtShowVideo = computed(() => store.getters.crtShowVideo);
	const edit_model = computed(()=>store.getters.clipJSON?.edit_model);
    const crtShowVideoList = computed(() =>
      store.getters.crtShowVideoList?.slice(0, 20)
    );
    const handleChangeVideo = (item) => {
      store.dispatch("SetCrtShowVideo", item);
    };

    return {
      ...toRefs(state),
      crtShowVideo,
      crtShowVideoList,
      handleChangeVideo,
	  edit_model
    };
  },
});
</script>

<style lang="less" scoped>
.combination_overview {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  height: 350px;
  overflow: overlay;
  overflow-x: hidden;
  padding-top: 20px;
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    width: 5px;
    background-color: transparent;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(193, 193, 193, 0.5);
    background-clip: padding-box;
    min-height: 28px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
  > div {
    width: 94px;
    height: 166px;
    margin: 10px;
    display: flex;
    justify-items: center;
    align-items: center;
    border-radius: 2px;
    cursor: pointer;
    img {
      width: 100%;
    }
  }

  .active {
    border: 2px solid #2878FFff;
  }
}
.combination_overview_none {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.38);
  width: 100%;
  height: 350px;
}
</style>
